---
import * as PrivacyContent from '../content/privacy.mdx';
import PageLayout from '../layouts/PageLayout.astro';
import TypeGPULogoLight from '../assets/typegpu-logo-light.svg';
import { Image } from 'astro:assets';
import GiantTypeGPULogo from '../assets/giant-typegpu.svg';
import SwmLogomarkSvg from '../assets/swm-logomark.svg';
import TypeGPULogomarkMonolight from '../assets/typegpu-logomark-monolight.svg';
import FooterLink from '../components/FooterLink.astro';
---

<PageLayout title="Privacy Policy">
    <Image
      src={TypeGPULogoLight}
      alt="TypeGPU Logo"
      class="mx-auto block my-12 w-58 md:w-[20rem] lg:w-[24rem]"
    />
    <main class="container mx-auto **:text-base **:[h2]:!text-2xl **:[h2]:!underline **:[h2]:font-thin **:[h2]:my-4 **:[h3]:!text-xl **:[h3]:my-3">
        <PrivacyContent.Content />
    </main>
    <footer class="text-micro">
      <div
        class="grid place-items-center gap-20 self-stretch md:rounded-t-[5rem] rounded-t-[2.5rem] px-4 pt-10 pb-10 md:pb-0 md:pt-20"
      >
        <div
          class="flex flex-col items-center lg:gap-20 gap-10 lg:max-w-340 md:max-w-234 w-full max-w-138"
        >
          <div class="w-full">
            <Image
              src={TypeGPULogomarkMonolight}
              alt="TypeGPU logomark"
              class="w-12 h-12 pb-4"
            />
            <div
              class="flex flex-col justify-between gap-10 md:flex-row text-grayscale-80"
            >
              <div class="text-pretty md:max-w-94 lg:max-w-108">
                <span class="font-medium">TypeGPU</span>
                <span class="text-grayscale-100">&mdash;</span> TypeScript library
                that enhances the WebGPU API, allowing resource management in a type-safe,
                declarative way.
              </div>

              <div class="grid gap-6 md:w-[24rem] lg:w-108">
                <FooterLink
                  label="Made by Software Mansion"
                  callToAction="Learn more about us"
                  href="https://swmansion.com"
                />

                <FooterLink
                  label="Check what's underneath"
                  callToAction="Open Github repository"
                  href="https://github.com/software-mansion/TypeGPU"
                />

                <FooterLink
                  label="Share feedback with us"
                  callToAction="Join our Discord server"
                  href="https://discord.gg/8jpfgDqPcM"
                />
              </div>
            </div>
          </div>

          <div class="flex items-center self-start gap-4 text-grayscale-100">
            <Image src={SwmLogomarkSvg} alt="Software Mansion Logomark" />
            &copy; {new Date().getFullYear()} Software Mansion S.A.
          </div>

          <div class="hidden md:grid">
            <div
              class="col-start-1 row-start-1 z-10 bg-gradient-to-b from-[#FFF0] to-[#FFF]"
            >
            </div>
            <Image
              class="w-full h-auto col-start-1 row-start-1"
              src={GiantTypeGPULogo}
              alt="A giant TypeGPU logo."
            />
          </div>
        </div>
      </div>
    </footer>
</PageLayout>
